<template>
  <view class="business-container">
    <view v-for="item in businessList" :key="item.id" class="business-box common-card">
      <view class="title" v-if="item.title">{{ item.title }}</view>
      <view class="business-list">
        <template v-for="(ele, index) in item.list" :key="index">
					<view class="business-item" @click="pushPage(ele)">
						<image :src="ele.imgUrl" mode=""></image>
						<view>
							{{ ele.name }}
						</view>
					</view>
        </template>
      </view>
    </view>
  </view>
</template>

<script setup>
import { computed, ref } from "vue";
const props = defineProps({
  user:{
    type: Object,
    default: () => {},
  },
});
const adminBusinessList = [
  {
    title: "",
    id: "0",
    list: [
			{
			  name: "用户",
			  imgUrl: "/static/home/user.png",
			  roterUrl: "/pages/question/index",
        isswitchTab: true,
			},
			{
			  name: "排行榜",
			  imgUrl: "/static/home/ranking.png",
			  roterUrl: "/subPackages/home/ranking/index",
			},
			{
			  name: "题目分类",
			  imgUrl: "/static/home/add_question_category.png",
			  roterUrl: "/subPackages/home/questionCategory/index",
			},
			{
			  name: "题目",
			  imgUrl: "/static/home/question.png",
			  roterUrl: "/subPackages/home/question/index",
			},
			{
			  name: "错题统计",
			  imgUrl: "/static/home/wrongquestion.png",
			  roterUrl: "/subPackages/home/wrongQuestionList/index",
			},
			{
			  name: "收藏统计",
			  imgUrl: "/static/home/collection.png",
			  roterUrl: "/subPackages/home/collectionList/index",
			},
			{
			  name: "对战房间",
			  imgUrl: "/static/home/room.png",
			  roterUrl: "/subPackages/home/battleRoom/index",
			},
			{
			  name: "反馈",
			  imgUrl: "/static/home/feedbacjk.png",
			  roterUrl: "/subPackages/home/feedback/index",
			},
    ],
  },
]
const userBusinessList = [
	{
		title: "",
		id: "1",
		list:[
			{
			  name: "签到",
			  imgUrl: "/static/home/checkin.png",
			  roterUrl: "/subPackages/home/checkin/index",
			},
			{
			  name: "对战",
			  imgUrl: "/static/home/battle.png",
			  roterUrl: "/subPackages/home/battle/index",
			},
      {
        name: "对战记录",
			  imgUrl: "/static/home/battleRecord.png",
			  roterUrl: "/subPackages/home/battleRecord/index",
      },
			{
			  name: "排行榜",
			  imgUrl: "/static/home/ranking.png",
			  roterUrl: "/subPackages/home/ranking/index",
			},
			{
			  name: "个人胜率",
			  imgUrl: "/static/home/profole.png",
			  roterUrl: "/subPackages/home/profile/index",
			},
			{
				name: "题目",
				imgUrl: "/static/home/questionSet.png",
				roterUrl: "/subPackages/home/question/index",
			},
			{
			  name: "题库",
			  imgUrl: "/static/home/question.png",
			  roterUrl: "/pages/question/index",
        isswitchTab: true,
			},
			{
			  name: "错题本",
			  imgUrl: "/static/home/wrongquestion.png",
			  roterUrl: "/subPackages/home/wrongQuestion/index",
			},
			{
			  name: "收藏夹",
			  imgUrl: "/static/home/collection.png",
			  roterUrl: "/subPackages/home/collection/index",
			},
			{
			  name: "评论统计",
			  imgUrl: "/static/home/common.png",
			  roterUrl: "/subPackages/home/common/index",
			},
			{
			  name: "反馈",
			  imgUrl: "/static/home/feedbacjk.png",
			  roterUrl: "/subPackages/home/feedback/index",
			},
		]
	}
]
const businessList = computed(()=>{
	return props.user.profile.roleType == '0' ? adminBusinessList : userBusinessList
})
const pushPage = (ele) => {
  if (ele.roterUrl) {
    if(ele.isswitchTab){ 
      uni.switchTab({
        url: `${ele.roterUrl}?params=${JSON.stringify(
          ele.params ? ele.params : {}
        )}`,
      })
    }else{
      uni.navigateTo({
        url: `${ele.roterUrl}?params=${JSON.stringify(
          ele.params ? ele.params : {}
        )}`,
      });
    }
  } else {
  }
};
</script>

<style lang="scss" scoped>
.business-container {
  padding-bottom: 25rpx;

  .title {
    color: $uni-color-1;
    font-size: 30rpx;
    margin-bottom: 5rpx;
  }

  .business-box {
    background-color: #fff;
    margin-top: 10rpx;
    border-radius: 12rpx;
    padding: 20rpx;
  }
}

.business-list {
	padding: 20rpx 5rpx;
  display: grid;
  row-gap: 30px;
  grid-template-columns: repeat(4, 1fr);

  image {
    width: 40px;
    height: 40px;
  }

  .business-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: $uni-color-2;

    image {
      margin-bottom: 10rpx;
    }
  }
}
</style>
